<template>
  <view class="restaurant-page">
    <view class="search-bar">
      <uni-search-bar
        @confirm="searchFun"
        bgColor="#ECEFF1"
        radius="24"
        placeholder="搜索餐厅或菜品"
      ></uni-search-bar>
    </view>
    <view class="list_wrap" v-if="list && list.length">
      <view
        class="item"
        v-for="(item, index) in list"
        :key="index"
        @click="handleToDetail(item)"
		:style="{backgroundImage: `url(${img_baseUrl}${item.imgAbbrev})`}"
      >
        <view class="item_top">
          <!-- <view class="item_lf">
            <image
              :src="img_baseUrl + item.imgAbbrev"
              mode="aspectFill"
            ></image>
          </view> -->
          <view class="item_rt">
            <text class="top">{{ item.name }}</text>
            <view class="mid" >
				<view v-if="item.feature" class="mid_lf">
					<view class="light" v-for="(i, index) in item.feature.split('@@')" :key="index">{{ i }}</view>
				</view>
				<view class="mid_rt" v-if="item.address">
				  <img :src="`${img_baseUrl}/statics/std/static/loc_gray.png`" alt="" />
				  <text>{{ item.dis }}</text>
				</view>
            </view>
            <!-- <view class="bot" v-if="item.address"> -->
              <!-- <view class="bot_lf">
                <img :src="`${img_baseUrl}/statics/std/static/loc_gray.png`" alt="" />
                <text>{{ item.address }}</text>
              </view> -->
              <!-- <view class="bot_rt">
									<img :src="`${img_baseUrl}/statics/std/static/price.png`" alt="">
									<text class="price">68.8</text>
									<text>起</text>
								</view> -->
            <!-- </view> -->
          </view>
        </view>
        <view
          class="item_bot"
          v-if="item.restMenuVos && item.restMenuVos.length"
        >
          <view class="bot_con">
            <view class="con_item" v-for="it in item.restMenuVos" :key="it.id">
              <view class="item_lf_img">
                <image :src="img_baseUrl + it.imgAbbrev" />
              </view>
              <view class="item_rt">
                <text>{{ it.name }}</text>
                <view class="price_con">
                  <img :src="`${img_baseUrl}/statics/std/static/price.png`" alt="" />
                  <text class="price">{{ (it.price/100).toFixed(2) }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="noData" v-if="list && list.length === 0">
      <image :src="`${img_baseUrl}/statics/std/static/noData.png`"></image>
      <text>暂无数据</text>
    </view>
  </view>
</template>

<script>
import { requestGet } from "@/utils/request.js";
import UniSearchBar from "@/components/searchBar.vue";
import {currentPosition, distance} from '@/utils/index.js';
export default {
  data() {
    return {
      searchVal: "",
      list: null,
      current: 1,
      total: 0,
      loadAll: false, // 已加载全部
      keyId: 0,
      img_baseUrl: process.env.VUE_APP_BASEURL_IMG_API,
	  myPosition: {}
    };
  },
  components: {
    UniSearchBar,
  },
  mounted() {
	  this.getCurrentPos()
    this._getList();
  },
  methods: {
	  async getCurrentPos(){
	     try {
	       this.myPosition = await currentPosition();
	     } catch (error) {
	       console.log('定位失败:', error);
	       return 
	     }
	  },
    searchFun(val) {
      this.searchVal = val;
      this.current = 1;
      uni.showLoading({
        title: "加载中",
      });
      this._getList();
    },
    handleToDetail(item) {
      uni.navigateTo({
        url: `/page_index/restaurant/detail?id=${item.id}`,
      });
    },
    async _getList() {
      const res = await requestGet("/shop/mobile/restaurant/list", {
        name: this.searchVal.trim(),
        pageNum: this.current,
        pageSize: 10,
      })
	  if (res.code === 200) {
	    this.total = res.total;
		if(this.myPosition.latitude && this.myPosition.longitude && res.rows && res.rows.length){
			res.rows.map(val => {
				distance(this.myPosition.latitude, this.myPosition.longitude,val.latitude,val.longitude).then(distance => {
				  console.log("distance========", distance)
				  this.$set(val, 'dis', Number(distance) > 1000 ? (Number(distance)/1000).toFixed(1) + 'km' : distance + 'm')
				}).catch(err => {
				  console.log("distance========err", res)
				  this.$set(val, 'dis', '暂未获得位置信息')
				})
			})
		  
		}
	    this.list =
	      this.current === 1 ? res.rows : this.list.concat(res.rows);
	    this.keyId++;
	  }
	  uni.hideLoading();
        // .then((res) => {
          
        // })
        // .catch((err) => console.log("错误了", err));
    },
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    if (this.list?.length < this.total) {
      this.current = this.current + 1;
      this._getList();
    } else {
      this.loadAll = true;
    }
  },
};
</script>

<style lang="scss">
.restaurant-page {
  box-sizing: border-box;
  min-height: 100vh;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #ffffff;

  .search-bar {
    position: sticky;
    top: 0;
    background-color: #fff;
  }

  .list_wrap {
    padding: 0 32rpx;
  }

  .item {
    width: 100%;
	height: 400rpx;
    box-sizing: border-box;
    padding: 24rpx 0 16rpx;
    display: flex;
    flex-direction: column;
	justify-content: flex-end;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	margin-bottom: 24rpx;
	box-shadow: 0rpx 16rpx 48rpx 0rpx rgba(91,115,102,0.2);
	border-radius: 24rpx;
    .item_top {
      width: 100%;
      display: flex;
      //align-items: center;
      justify-content: space-between;
    }
    .item_bot {
      width: calc(100vw - 64rpx);
      display: flex;
	  box-sizing: border-box;
	  padding-left: 16rpx;
	  flex: 1;
	  align-items: flex-end;

      .bot_con {
        width: 100%;
        display: flex;
        overflow-x: scroll;
        &::-webkit-scrollbar {
          display: none;
        }
        .con_item {
          width: 400rpx;
          height: 136rpx;
          background: #f7f9fa;
          border-radius: 24rpx 24rpx 24rpx 24rpx;
          box-sizing: border-box;
          padding: 8rpx;
          display: flex;
          margin-right: 16rpx;
          .item_lf_img {
            width: 120rpx;
            height: 120rpx;
            border-radius: 8rpx 8rpx 8rpx 8rpx;
            overflow: hidden;
            image {
              width: 100%;
              height: 100%;
              display: block;
            }
          }
          .item_rt {
            width: 248rpx;
            margin-left: 16rpx;
            box-sizing: border-box;
            padding: 8rpx 0 6rpx;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            text {
              width: 100%;
              font-size: 28rpx;
              font-weight: 400;
              color: rgba(0, 0, 0, 0.8);
              line-height: 40rpx;
            }
            .price_con {
              display: flex;
              align-items: center;
              image {
                width: 32rpx;
                height: 32rpx;
                display: block;
              }
              text {
                font-size: 36rpx;
                font-family: D-DIN-Bold, D-DIN;
                font-weight: 700;
                color: #ff7614;
                line-height: 28rpx;
              }
            }
          }
        }
      }
    }

    .item_lf {
      width: 200rpx;
      height: 200rpx;
      border-radius: 12rpx;
      overflow: hidden;
      margin-right: 32rpx;

      image {
        width: 100%;
        height: 100%;
        display: block;
      }
    }

    .item_rt {
      flex: 1;
      height: 100%;
      display: flex;
      flex-direction: column;
	  box-sizing: border-box;
	  padding: 0 24rpx;

      .top {
        font-size: 32rpx;
        font-weight: 400;
        color: #fff;
        line-height: 44rpx;
        margin-top: 8rpx;
		text-shadow: 0px 2px 2px rgba(0,0,0,0.3);
      }

      .mid {
        flex: 1;
        margin: 16rpx 0 8rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.mid_lf {
			.light {
			  box-sizing: border-box;
			  padding: 4rpx 8rpx;
			  height: 40rpx;
			  background: rgba(252,211,149,0.9);
			  border-radius: 8rpx 8rpx 8rpx 8rpx;
			  font-size: 24rpx;
			  font-weight: 400;
			  color: #ff7614;
			  // line-height: 30rpx;
			  
			}
		}

        
		.mid_rt {
		  display: flex;
		  align-items: center;
		
		  image {
		    width: 32rpx;
		    height: 32rpx;
		    display: block;
		    margin-right: 12rpx;
		  }
		
		  text {
		    font-size: 24rpx;
		    font-weight: 400;
		    color: rgba(0, 0, 0, 0.5);
		    line-height: 30rpx;
		  }
		}
      }

      .bot {
        height: 40rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .bot_lf {
          display: flex;
          align-items: center;

          image {
            width: 32rpx;
            height: 32rpx;
            display: block;
            margin-right: 12rpx;
          }

          text {
            font-size: 24rpx;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.5);
            line-height: 30rpx;
          }
        }

        .bot_rt {
          display: flex;
          align-items: baseline;

          image {
            width: 32rpx;
            height: 32rpx;
            display: block;
          }

          text {
            font-size: 24rpx;
            font-weight: 400;
            color: rgba(0, 0, 0, 0.6);
            line-height: 34rpx;
          }

          .price {
            font-size: 40rpx;
            font-family: D-DIN-Bold;
            font-weight: 700;
            color: #ff7614;
            line-height: 40rpx;
            margin-right: 6rpx;
          }
        }
      }
    }
  }
}
</style>
